<template>
     <el-upload
          ref="uploadRef"
          :style="{ width: width }"
          class="upload-demo"
          :on-success="onSuccessFile"
          :show-file-list="showFileList"
          :on-error="onErrorFile"
          :before-upload="beforeUpload"
          method="post"
          :auto-upload="false"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          :withCredentials="true"
          :limit="limit"
          :on-change="onChangeFile"
          v-model:file-list="fileList"
          :list-type="'text'"
          :on-exceed="handleExceed"
          :on-remove="handleRemove"
     >
          <template #trigger>
               <el-button v-bind="$attrs" v-if="showBtn">
                    {{ text }}
               </el-button>
               <slot></slot>
          </template>
          <template #tip>
               <!-- <div v-if="showTip" class="el-upload__tip text-red">只能上传{{ fileType.join('') }}文件,最多上传{{ limit }}个文件</div> -->
               <div v-if="showTip" class="el-upload__tip text-red">
                    最多上传{{ limit }}个文件
               </div>
          </template>
     </el-upload>
</template>

<script setup lang="ts">
import { ElMessage, genFileId } from 'element-plus'
const props = defineProps({
     showBtn: {
          type: Boolean,
          default: true,
     },
     width: {
          type: String,
          default: 'auto',
     },

     limit: {
          type: Number,
          default: 1,
     },

     // 接收父组件传递的参数
     text: {
          type: String,
          default: '批量录入',
     },
     showFileList: {
          type: Boolean,
          default: false,
     },
     fileType: {
          type: Array,
          default: ['.xlsx', '.xls', '.csv'],
     },
     otherData: {
          type: Object,
          default: () => null,
     },
     showTip: {
          type: Boolean,
          default: false,
     },
})
const $emit = defineEmits(['onSuccess'])
const uploadRef = ref()
const fileList: any = ref([])
const onSuccessFile = () => {}
const onErrorFile = () => {
     ElMessage.error('导入失败！')
}
const beforeUpload = (file: any) => {
     const fileName = file.name
     let isHasFileType
     const typeArry = props.fileType
     const type = fileName.substring(fileName.lastIndexOf('.'))
     const isImage = typeArry.indexOf(type) > -1
     if (!isImage) {
          isHasFileType = false
          ElMessage.error(`上传文件只能是${typeArry.join('、')}格式!`)
     } else {
          isHasFileType = true
     }
     console.log(isHasFileType)
     const regExp = /[\\/:*?"<>|=%！·\-~\[\]_]/g
     if (regExp.test(fileName)) {
          ElMessage.error(`文件名 "${fileName}" 包含不允许的特殊字符！`)
          return false
     }
     return isHasFileType // 如果文件名没有包含特殊字符，则允许上传
}
const onChangeFile = (file: any) => {
     const fileName = file.name
     const typeArry = props.fileType
     const type = fileName.substring(fileName.lastIndexOf('.'))
     const isImage = typeArry.indexOf(type) > -1
     if (!isImage) {
          uploadRef.value && uploadRef.value.clearFiles()
          return ElMessage.error(`上传文件只能是${typeArry.join('、')}格式!`)
     }
     fileList.value = [file.raw]
     console.log(fileList.value)
     let obj = {
          otherData: props.otherData,
          file: fileList.value[0],
     }
     if (fileList.value.length > 0) {
          if (props.otherData) {
               $emit('onSuccess', obj)
          } else {
               $emit('onSuccess', fileList.value)
          }
          // uploadRef.value && uploadRef.value.clearFiles()
     }
}
const handleRemove = () => {
     $emit('onSuccess', fileList.value)
}
const handleExceed: any = (files: any) => {
     uploadRef.value!.clearFiles()
     const file = files[0] as any
     file.uid = genFileId()
     uploadRef.value!.handleStart(file)
}

const clearFiles = () => {
     fileList.value = []
     uploadRef.value && uploadRef.value.clearFiles()
}
onUnmounted(() => {
     fileList.value = []
     uploadRef.value && uploadRef.value.clearFiles()
})
defineExpose({
     clearFiles,
})
</script>

<style lang="scss" scoped>
.upload-demo {
     display: inline-block;
     margin: 0 0 0 0px;
}

.el-upload__tip {
     color: #a8abb2;
     font-size: 12px;
}
</style>
